<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <!-- <script>
        function callback(data) { console.log(data) }
    </script> -->
    <!-- <script src="http://localhost:8888"></script> -->
    <img src="https://p6-passport.byteacctimg.com/img/user-avatar/54b75d9c6a199f70b0e69d9cf0cf495c~300x300.image"></=>
    <script>
        function jsonp(url,data={},callback='callback',cb) {
            // console.log(url,data,callback);
            let dataStr = url.indexOf('?') === -1?'?':'&';
            for(let key in data) {
                dataStr += `${key}=${data[key]}&`
            }
            // with padding
            dataStr += `callback=${callback}`
            let scriptSrc = url+dataStr;
            // console.log(scriptSrc)
            let oScript = document.createElement('script');
            oScript.src=scriptSrc;
            document.body.appendChild(oScript);
            window[callback] = (data) => {
                // 完成跨域请求，做接下来的业务
                cb(data)
                
            }
        }


        jsonp('http://localhost:8888/recommend?a=1',{
            page:1,
            cate:'recommend'
        },'recommendCallback',(data)=>console.log(data))
        // 1. script src DOM 动态构建
        // 2. callback 动态指定
        // 跨域请求 Ajax fetch 同源策略 
        // 能发送吗？  cors  
        // 服务器能接受吗？  
        // 数据到达能相信吗？ 
        // fetch('http://localhost:8888/')
        //     .then(data => data.json())
        //     .then(data => {
        //         console.log('-----')
        //     })
    </script>
</body>
</html>